<script setup>
import {Setting, Fold} from '@element-plus/icons-vue'
import {inject, provide, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
const route = useRoute()

//设置账号名字
const nickname = localStorage.getItem('roleId')
//接收数据
const aside_width = inject('aside_width')
const isCollapse = inject('isCollapse')

//点击收缩
const collapse = () => {
  isCollapse.value = !isCollapse.value
  if (!isCollapse.value) {
    aside_width.value = '300px'
  } else {
    aside_width.value = '64px'
  }
}
//退出
const logout = () => {
  ElMessageBox.confirm('您确定要提出登录吗', '提示', {
    confirmButtonText: '确定',
    type: 'warning',
    center: true
  })
      .then(() => {
        router.push('/login')
        ElMessage({
          message: "退出登录成功",
          type: 'success',
        })
      })
      .catch(() => {
        ElMessage({
          message: "已取消退出登录",
          type: 'info',
        })
      })

  localStorage.removeItem('token')
  localStorage.removeItem('id')
  localStorage.removeItem('roleId')
}
</script>

<template>
  <div class="toolbar" style="width:100%">
    <el-icon @click="collapse" style="text-align: left;margin:0; font-size: 34px;cursor:pointer; ">
      <fold/>
    </el-icon>
    <span style="display: inline-block; margin: 0 auto; text-align: center;font-size: 34px;">欢迎来到仓库管理系统</span>
    <el-dropdown>
      <el-icon style="margin-right: 8px; margin-top: 1px;font-size:20px;">
        <setting/>
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="router.push('/')">个人中心
          </el-dropdown-item>
          <el-dropdown-item @click="logout">提出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <span style="font-size:16px;">{{ nickname }}</span>
  </div>

</template>


<style scoped>

.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;

}

</style>